{% extends 'base.html' %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="card box-shadow m-2 form-wrap">
                <div class="card-header text-center">
                    <h3>Конвертер валют </h3>
                </div>
                <form id="form" class="p-3" action='' method="POST">
                    {% csrf_token %}
                    <div class="form-row">
                        <div class="form-group col-md-4 mb-0">
                            <label for="amount">Сумма*</label>
                            <input id='amount' type="number" class="form-control" placeholder="Введите число" {% if from_amount %} value="{{ from_amount }}" {% endif %} name="from-amount">
                        </div>
                        <div class="form-group col-md-4 mb-0">
                            <label for="from_curr">Отдаем*</label>
                            <select class="form-control" id="from_curr" name="from-curr" value="{{ from_curr }}">
                                {% for curr in currencies %}
                                    <option value="{{ curr }}" {% if from_curr == curr %}selected{% endif %}>{{ curr }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group col-md-4 mb-0">
                            <label for="to-curr">Получаем*</label>
                            <select class="form-control" id="to-curr" name="to-curr" value="{{ to_curr }}">
                                {% for curr in currencies %}
                                    <option value="{{ curr }}" {% if to_curr == curr %}selected{% endif %}>{{ curr }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <hr>
                    {% if converted_amount %}
                        <div class="card col-6 p-0 m-auto">
                            <div class="card-header text-center">
                                    <h5>Отдаем <b>{{ from_curr }}</b> Получаем
                                        <b>{{ to_curr }}</b></h5>
                            </div>
                            <div class="card-body">
                                {{ converted_amount }}
                            </div>
                        </div>
                    {% endif %}
                    <div class="submit-btn mt-3">
                        <button type="submit" class="btn btn-primary">Рассчитать</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}